<template>
      <!-- 左边aside -->
      <el-aside width="200px">
        <div>
          <div class="logo">
            <img src="@/assets/images/logo.png" alt="" class="img-style">
          </div>

          <!-- NavMenu 导航菜单  -->
          <el-menu class="el-menu-vertical-demo" background-color="#fff" text-color="#000"
                 active-text-color="#008080" :router="true">
              <el-menu-item index="/admin/restaurant">
                <i class="el-icon-fork-spoon"></i>
                <span slot="title">餐馆</span>
              </el-menu-item>
              <el-menu-item index="/admin/menu">
                <i class="el-icon-food"></i>
                <span slot="title">菜单</span>
              </el-menu-item>
              <el-menu-item index="/admin/order" v-if="orderShowing">
                <i class="el-icon-s-order"></i>
                <span slot="title">订单</span>
              </el-menu-item>
          </el-menu>
        </div>

          <!-- logout -->
          <el-button @click="logoutBtn">
            <span>登出</span>
          </el-button>

      </el-aside>
</template>

<script>
import { get } from '@/common/utils';
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      orderShowing: (state) => state.login.orderShow,
    }),

    orderShowing() {
      return get('orderShowStore');
    },
  },

  methods: {
    logoutBtn() {
      localStorage.removeItem('loginName');
      localStorage.removeItem('operateShowStore');
      localStorage.removeItem('orderShowStore');
      this.$router.push('/login');
    },
  },

};
</script>

<style>

</style>
